<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vertical Tabs</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="tabs-container">
        <div class="tabs-layout">
            <select class="tabs-select">
                <option value="tab1">Your Idea & Vision</option>
                <option value="tab2">Product Specification</option>
                <option value="tab3">UX/UI Design</option>
                <option value="tab4">AI & Machine Learning</option>
                <option value="tab5">Architecture & Engineering</option>
                <option value="tab6">MVP Release & Iterations</option>
            </select>
            <ul class="tabs">
                <li>
                    <a id="tab1" title="Your Idea & Vision" href="#tab1">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bulb" width="24"
                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path>
                            <path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3"></path>
                            <path d="M9.7 17l4.6 0"></path>
                        </svg>
                        Your Idea & Vision
                    </a>
                </li>
                <li>
                    <a id="tab2" title="Product Specification" href="#tab2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-description"
                            width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                            fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
                            <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
                            <path d="M9 17h6"></path>
                            <path d="M9 13h6"></path>
                        </svg>
                        Product Specification
                    </a>
                </li>
                <li>
                    <a id="tab3" title="UX/UI Design" href="#tab3">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brush" width="24"
                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M3 21v-4a4 4 0 1 1 4 4h-4"></path>
                            <path d="M21 3a16 16 0 0 0 -12.8 10.2"></path>
                            <path d="M21 3a16 16 0 0 1 -10.2 12.8"></path>
                            <path d="M10.6 9a9 9 0 0 1 4.4 4.4"></path>
                        </svg>
                        UX/UI Design Prototype
                    </a>
                </li>
                <li>
                    <a id="tab4" title="Software Development" href="#tab4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-robot" width="24"
                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path
                                d="M7 7h10a2 2 0 0 1 2 2v1l1 1v3l-1 1v3a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-3l-1 -1v-3l1 -1v-1a2 2 0 0 1 2 -2z">
                            </path>
                            <path d="M10 16h4"></path>
                            <circle cx="8.5" cy="11.5" r=".5" fill="currentColor"></circle>
                            <circle cx="15.5" cy="11.5" r=".5" fill="currentColor"></circle>
                            <path d="M9 7l-1 -4"></path>
                            <path d="M15 7l1 -4"></path>
                        </svg>
                        AI & Machine Learning
                    </a>
                </li>
                <li>
                    <a id="tab5" title="Architecture & Engineering" href="#tab5">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" width="24"
                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path
                                d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z">
                            </path>
                            <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
                        </svg>
                        Architecture & Engineering
                    </a>
                </li>
                <li>
                    <a id="tab6" title="MVP Release & Iterations" href="#tab6">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rocket" width="24"
                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path
                                d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3">
                            </path>
                            <path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3"></path>
                            <path d="M15 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                        </svg>
                        MVP Release & Iterations
                    </a>
                </li>
            </ul>
            <div class="tab-content-wrapper">
                <section id="tab1-content" class="tab-content">
                    <h2>Your Idea & Vision</h2>
                    <p>
                        Maybe you have an idea and a vision of changing the world, your company want to execute new
                        product
                        or you just have a unique dataset, but you do not have the knowledge to get the most from your
                        data.
                    </p>
                    <img src="assets/idea.png" alt="idea">
                </section>
                <section id="tab2-content" class="tab-content">
                    <h2>Product Specification</h2>
                    <p>
                        In this phase, we will remove vagueness and draft our minimum viable product in as much detail
                        as we
                        can. We will also evaluate the current capabilities of AI and how we can maximise the power of
                        your
                        data. This is the key phase and foundation for the future success of your product.
                    </p>
                    <img src="assets/product.png" alt="product">
                </section>
                <section id="tab3-content" class="tab-content">
                    <h2>UX/UI Design</h2>
                    <p>
                        We will start to design UX & UI for already approved features. Our design process includes user
                        research and accessibility as well as usability testing. The end goal of this phase is a smooth
                        design and an easy-to-use product. We continually iterate over our design features.
                    </p>
                    <img src="assets/ui.png" alt="ui">

                </section>
                <section id="tab4-content" class="tab-content">
                    <h2>AI & Machine Learning</h2>
                    <p>
                        The application of AI & machine learning is the key focus for every modern product. So many new
                        market opportunities emerge every day.
                    </p>
                    <img src="assets/brain.png" alt="brain">

                </section>
                <section id="tab5-content" class="tab-content">
                    <h2>Architecture & Engineering</h2>
                    <p>
                        Software architecture and engineering includes designing the database, backend, and frontend
                        engineering, as well as preparing the infrastructure and automating your business processes.
                    </p>
                    <img src="assets/engineer.png" alt="engineer">
                </section>
                <section id="tab6-content" class="tab-content">
                    <h2>MVP Release & Iterations</h2>
                    <p>
                        Now the product is finalized and ready for users. The product will continue to be extended in an
                        agile way based on customers’ feedback.
                    </p>
                    <img src="assets/release.png" alt="release">
                </section>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>